/*------------------------------------*\
    #FORMS
\*------------------------------------*/

/**
 * 1) Form element base styles
 */

/**
 * Input placeholder text base styles
 */
::-webkit-input-placeholder {
   color: $color-form-placeholder;
}

::-moz-placeholder {
   color: $color-form-placeholder;
}

:-ms-input-placeholder {
   color: $color-form-placeholder;
}

/**
 * Fieldset base styles
 */
fieldset {
   border: 0;
   padding: 0;
   margin: 0;
}

/**
 * Legend base styles
 */
legend {
   margin-bottom: 0.25rem;
}

/**
 * Label base styles
 */
label {
   display: block;
   padding-bottom: 0.25rem;
   color: $color-form-label;
}

/**
 * Add font size 100% of form element and margin 0 to these elements
 */
button,
input,
select,
textarea {
   font-family: inherit;
   font-size: $font-size-med;
   margin: 0;
}

/**
 * Text area base styles
 */
textarea {
   resize: none;
}

/**
 * Input  and text area base styles
 */
input,
textarea {
   width: 100%;
   padding: 0.5rem;
   border: $border-width solid $color-form-border;
   background: $color-form-bg;

   &:focus {
      border-color: $color-form-border-focus;
   }
}

/**
 * Remove webkit appearance styles from these elements
 */
input[type='text'],
input[type='search'],
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration,
input[type='url'],
input[type='number'],
textarea {
   -webkit-appearance: none;
}

/**
 * Checkbox and radio button base styles
 */
input[type='checkbox'],
input[type='radio'] {
   width: auto;
   margin-right: 0.3rem;
   border-color: $color-form-border;
}

/**
 * Search input base styles
 */
input[type='search'] {
   -webkit-appearance: none;
   border-radius: 0;
}

/**
 * Select
 * 1) Remove default styling
 */
select {
   display: block;
   font-size: $font-size-med;
   width: 100%;
   border: $border-width solid $color-form-border;
   padding: 0.5rem;
   background: $color-form-bg;
   color: $color-form;

   &:focus {
      border-color: $color-form-border-focus;
   }
}
